<template>
	<div id="index_order">
		<div class="order">
        <div class="contant">
          <div class="order_nav">
            <div class="order_nav_wrapper">
              <em class="toggle" data-state="false" @click="slideTog()">
              	<img v-lazy="require('./img/order_toggle.png')" style="width:.28rem" />
              </em>
              <div class="top clearfix">
                <div class="wrapper">
                  <div class="all_tit">全部服务</div>
                  <ul>
                    <li data-icId="0"><a href="javascript:void(0)" class="active">全部</a></li>
										<li v-for="item in orderNavList" data-icId="item.icId">
											<a href="javascript:void(0)">{{item.icName}}</a>
										</li>
                    <!-- {
                      itemClass_show.map(function(item,index){
                        return(
                          <li data-icId={item.icId}><a href="javascript:void(0)">{item.icName}</a></li>
                        )
                      })
                    } -->
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="item_wrapper">
 <!-- to={"/servItem/det/" + item.itemId} -->
            <!-- {{itemProShow}} -->
            <a href="javascript:void(0)" v-for="item in itemProShow" class="item">
              <img :src="getServImg(item.itemImage,'_750_480',item.hospitalId,item.itemId)" class="itemImage" />
              <div class="subtitle">{{item.subtitle}}</div>
              <div class="txt box">
                <div class="left">
                  <em class="docImg" :style="'background-image:url('+ getDocImg(item.doctorPic,'_200_200',item.hospitalId,item.doctorId) + ');'"></em>
                  <div>
                    <h4 class="txt_ellip">{{item.doctorName}} {{item.subtitle}}</h4>
                    <small class="txt_ellip">{{item.hospitalName}} 
                      <img v-lazy="require('./img/mall_vip.png')" style="width:.28rem" />
                    </small>
                  </div>
                </div>
                <div class="right">
                  <span>&yen; {{item.sellingPrice}}</span>
                </div>
              </div>
            </a>

            <div style="height:1.2rem"></div>
          </div>
        </div>
      </div>
	</div>
</template>

<script>
import { mapState,mapActions } from 'vuex'
import {getServImg,getDocImg} from 'imgSrc';

export default{
	components:{
	},
	data(){
		return {
					name:this.$store.state.name,
					slideState:false
        }
	},
	methods:{
		slideTog(){
			let wpr = document.querySelector('.order_nav_wrapper');

			if(!this.slideState){
				wpr.classList.add('active')
			}else{
				wpr.classList.remove('active')
			}
			this.slideState = !this.slideState;
      
		},
    getServImg:getServImg,
    getDocImg:getDocImg
	},
	beforeMount(){
		this.$store.dispatch('order_nav_list')
    this.$store.dispatch('item_pro_show',{pageSize:20,pageNo:1})
	},
	mounted(){

	},
	computed:{
		itemProShow(){
			return this.$store.state.aysnDate.itemProShow
		},
		// 上下俩种方法都可
		...mapState({
			orderNavList:state => state.aysnDate.orderNavList
		}),
	},
	updated(){
		console.log('ok +++++++++++++++++++++')
	}
}
</script>

<style lang="scss">
.order{
  .order_nav{
    font-size:.24rem;color:#202020;height: .9rem;position: relative;z-index: 2;
    .order_nav_wrapper{overflow:hidden;position: absolute;left:0;top:0;width:100%;z-index:2;background-color: #fff;height: .9rem;transition: all .2s;}
    .toggle{
      position: absolute;right:0;top:0;width:.88rem;height: .9rem;z-index: 22;background-color:#fff;box-shadow: 0 0 0.01rem 0.04rem rgba(211,211,211,0.4);display:flex;justify-content: center;align-items: center;
    }
    .toggle[data-state="false"] img{transform: rotateZ(0)}
    .toggle[data-state="true"] img{transform: rotateZ(45deg)}
    .top a.active{color:#9c7860;}
    .all_tit{display:none;overflow:hidden;font-size: .32rem;color:#202020;text-align:center;transition: all .3s;margin-top:0;}
    ul,.all{display:table-cell;}
    ul{overflow:hidden;margin:0;transition: all .2s;}
    .top{
      overflow:hidden;overflow-x:scroll;margin-right:.88rem;height:.9rem;
      .wrapper{width:auto;display:table;width:100%;}
    }
    ::-webkit-scrollbar {
      width:0;height:0;
    }
    .order_nav_wrapper.active{
      height:auto;
      .top{margin-right:0;height:auto;}
      .all{display:none}
      ul{width:100%;flex-wrap:wrap;display:flex;margin:.58rem 0 .4rem;}
      li{float:left;display:inline;
        a{height:.62rem;line-height: .62rem;}
      }
      .all_tit{display: block;margin-top:.3rem;}
    }
    .all,li a{
      float:left;display:inline;white-space: pre;color:#202020;height:.9rem;box-sizing: border-box;line-height: .9rem;margin:0 .34rem;position:relative;
      &:before{
        content:"";display:block;position:absolute;width:0;height:0;line-height:0;font-size:0;
        border-bottom: .08rem #9c7860 solid;left:50%;bottom:.02rem;border-left:.05rem transparent solid;border-right:.05rem transparent solid;
        transform: translate3d(-50%,0,0);opacity:0;transition:all .4s ease;
      }
      &.active:before{
        opacity:1;
      }
      &:after{
        content:'';width:0;height:.03rem;z-index:22;background-color:#9c7860;position:absolute;left:50%;bottom:-.01rem;transform: translate3d(-50%,0,0);
        opacity:0;transition:all .3s ease;
      }
      &.active:after{
        opacity:1;
        width:100%;
      }
    }
    li{display:table-cell;}

  }
  .contant{
    margin-top:.24rem;background-color: #fff;
    .tit_sty1{
      padding:.5rem 0 .26rem;margin-bottom: .3rem;
    }
    .item_wrapper{
      padding:0 .14rem;margin-top:.14rem;position: relative;z-index:1;
      .item{
        position:relative;
        &>span{position:relative;}
        &>span img{position: relative;z-index:2;}
        .subtitle{position:absolute;left:.3rem;top:.28rem;z-index: 33;font-size:.32rem;line-height: .32rem;color:#fff;font-weight: bold;border-left:.1rem #fff solid;padding-left: .12rem;}
        &>span:before{position:absolute;content:"";left:0;top:0;width:100%;height:100%;z-index: 22;background-color: rgba(32,32,32,.2)}
        box-shadow: 0 0 .1rem .05rem rgba(228,228,228,.4);display:block;overflow: hidden;margin-bottom:.4rem;background-color: #fff;
        img{width:100%;}
        .itemImage{position: relative;z-index:3;}
        .txt{
          width:100%;padding:0 .24rem .42rem .3rem;display:table;font-size:.2rem;margin-top:-.3rem;position: relative;z-index:22;
          .left{width:5.26rem;line-height:1.2;font-size:.24rem;color:#202020;
            small{color:#919191;font-size:inherit;margin-top:.04rem;font-size: .24rem;line-height: .32rem;
              img{transform: translate3d(0,10%,0)}
            }
            div{display: flex;flex-direction:column;justify-content: flex-end;height:1.2rem;line-height: .32rem;}
            .docImg{
              float:left;vertical-align: top;width:1.1rem;height:1.1rem;background-color:#fff;border-radius: 50%;border:.06rem #fff solid;background-repeat:no-repeat;background-size: cover;background-clip: padding-box;
            }
          }
          .right{
            text-align:right;
            span{
              display:inline-block;color: #997760;font-size:.28rem;
              max-width:100%;
            }
          }

          &>div{display:table-cell;vertical-align: bottom;}
        }
      }
    }
  }
}
</style>
